<template>
	<div class="app-container">
		<el-form :model="addData" label-position="left" size="small">
			<el-form-item label="推荐副标题" :label-width="formLabelWidth">
				<el-input placeholder="请输入内容" v-model="addData.subheading"></el-input>
			</el-form-item>
			<el-form-item label="奖金推荐规则" :label-width="formLabelWidth">
				<tinymce :height="300" v-model="content" id='tinymce' :menubar="'false'"></tinymce>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer bottom-center">
			<el-button @click="clearAction">{{ $t('table.cancel') }}</el-button>
			<el-button type="primary">{{ $t('table.confirm') }}</el-button>
		</div>
	</div>
</template>

<script>
	import {
		fetchList,
		fetchPv,
		createArticle,
		updateArticle
	} from "@/api/article";
import waves from "@/directive/waves"; // Waves directive
import { parseTime } from "@/utils";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import tinymce  from '@/components/Tinymce'

const calendarTypeOptions = [
{ key: "CN", display_name: "China" },
{ key: "US", display_name: "USA" },
{ key: "JP", display_name: "Japan" },
{ key: "EU", display_name: "Eurozone" }
];

// arr to obj ,such as { CN : "China", US : "USA" }
const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
	acc[cur.key] = cur.display_name;
	return acc;
}, {});

export default {
	name: "ComplexTable",
	components: { 
		Pagination,
		tinymce
	},
	directives: { waves },
	filters: {
	},
	data() {
		return {
			addData: {},
			formLabelWidth: '120px',
			content: '',
		};
	},
	created() {
	},
	methods: {
		clearAction() {
			this.addData = {};
			this.content = '';
		}
	}
};
</script>
